import { getLabelOrCategory } from "@/api/label";
import { NullAble } from "@pangza-club/utils/types";
import { Card, message, Tag, Typography } from "antd";
import { useEffect, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { ProColumns, ProTable } from '@ant-design/pro-components';
import { getSubjectByLabel } from "@/api/subject";
import { getLabelByValue, SUBJECT_DIFFCULT } from "@/common/constance";
const { Title } = Typography;

const colorObj = {
    1: 'success',
    2: 'warning',
    3: 'error'
};

const difficultEnum: any = {
    all: { text: '全部', status: undefined },
    easy: { text: '入门', status: 1 },
    warning: { text: '中等', status: 2 },
    difficult: { text: '困难', status: 3 },
}

const columns: ProColumns<SubjectVO>[] = [
    {
        title: '题目名称',
        dataIndex: 'subjectName',
        render: (_, record) => <Link to={`/subject-info/${record.id}`} target="__blank">{record.subjectName}</Link>,
    },
    {
        title: '题目难度',
        dataIndex: 'subjectDifficult',
        initialValue: 'all',
        valueEnum: difficultEnum,
        render: (_, record) => <Tag color={colorObj[record.subjectDifficult as unknown as keyof typeof colorObj]}>{getLabelByValue(SUBJECT_DIFFCULT, record.subjectDifficult)}</Tag>
    },
    {
        title: '题目分类',
        hideInSearch: true,
        render: (_: any, record: SubjectVO) => <div>
            {
                record.categoryList?.map(item => <Link key={item.id} to={`/label-subject/${item.id}/category`} target="__blank"><Tag>{item.categoryName}</Tag></Link>)
            }
        </div>
    },
    {
        title: '题目标签',
        key: 'labelList',
        hideInSearch: true,
        render: (_: any, record: SubjectVO) => <div>
            {
                record.labelList?.map(item => <Link key={item.id} to={`/label-subject/${item.id}/label`} target="__blank"><Tag>{item.labelName}</Tag></Link>)
            }
        </div>
    },
];

const LabelSubject = () => {
    const params = useParams() as unknown as { type: string, id: number };
    const nav = useNavigate();
    const [label, setLabel] = useState<NullAble<Label>>(null);

    useEffect(() => {
        const { type, id } = params;
        if (!['label', 'category'].includes(type)) {
            message.warning('未知的编号类型');
            nav('/');
        } else {
            getLabelOrCategory(id, type).then(res => {
                setLabel(res);
            })

        }
    }, [])

    return <div>
        <Card>
            <div className="flex items-center">
                <img className="w-[50px]" src={label?.imageUrl} alt="" />
                <span className="text-xl ml-4">关于 {label?.labelName} 面试题</span>
            </div>
        </Card>

        <div className="mt-8">
            <Title level={4}>最新题目</Title>
            <ProTable<SubjectVO>
                columns={columns}
                request={async (p, sorter, filter) => {
                    // 表单搜索项会从 params 传入，传递给后端接口。
                    console.log(p, sorter, filter);
                    const result = await getSubjectByLabel({
                        pageNum: p.current || 1,
                        pageSize: 10,
                        form: {
                            labelId: params.id,
                            type: params.type as 'label' | 'category',
                            subjectName: p.subjectName,
                            subjectDifficult: difficultEnum[p.subjectDifficult].status
                        }
                    })
                    return Promise.resolve({
                        data: result.list,
                        success: true,
                        total: result.total,
                    });
                }}
                rowKey="id"
                pagination={{
                    pageSize: 10
                }}
            />
        </div>
    </div>
}

export default LabelSubject;